<script setup lang="tsx">
import Son from './Son.vue'
//配合 setup + jsx
// 定义一个函数, 函数在template中直接当做标签使用 函数的返回值 会当做结构渲染
// 注意点
// 1. 函数的返回值有且只能有一个根节点
// 2. jsx/tsx中解析变量/属性绑定使用的是 {}
// 3. 在jsx/tsx中vue所有的指令都不能使用
// 4. 事件绑定 onClick={处理函数} 涉及到传参 onClick={() => 函数名(参数..)}
// 5. 事件绑定的事件名 都是 onClick onMouseenter onMouseleave on驼峰
// 6. 标签都要闭合 不论是单标签闭合 还是双标签闭合
// 7. 分支处理 可以使用 三元表达式 但是不能写 if switch 分支语句
// 8. 循环使用map函数处理
// 9. 注释 推荐使用 {/** */}
import { ref } from 'vue'
const num = ref(888)
const str = ref('哈哈哈')
const str2 = 'box'
const add = () => {
  num.value++
}
const addN = (val: number) => {
  num.value += val
}

// >=18 成年   未成年
const age = ref(16)
const isAdult = () => {
  if (age.value >= 18) {
    return '成年人'
  } else {
    return '未成年'
  }
}
const list = ['吃饭', '睡觉', '吃饭饭', '喝水水']
const vnode = () => {
  return (
    // 11
    <div>
      <h1 id={str2} class={str2}>
        我是标题 - {num.value}
      </h1>
      <p>我是p标签 - {str.value}</p>
      <button onClick={add}>+1</button>
      <button onClick={() => addN(5)}>+N</button>
      <hr></hr>
      {age.value >= 18 ? '成年人' : '未成年'}
      {isAdult()}
      {list.map((item, index) => {
        return <li key={index}>{item}</li>
      })}
      <Son></Son>
    </div>
  )
}
</script>
<template>
  <vnode></vnode>
</template>
<style scoped></style>
